import React, {Component} from 'react'
import {Route, withRouter} from 'react-router-dom'
import Routes from './routes'
import {eventEmitter} from './common/js/utils'
import {asyncSetUserInfo} from './actions/index'
import AnimatedRouter from './component/animated_router'
import 'antd/dist/antd.css'
import './common/style/index.scss'

@withRouter
class App extends Component {
  state = {
    checked: false
  }

  componentWillMount() {
    this.loginCheck()
    eventEmitter.on('userInfo', this.loginCheck)
  }

  componentWillUnmount() {
    eventEmitter.off('userInfo', this.loginCheck)
  }

  loginCheck = () => {
    this.props.store.dispatch(asyncSetUserInfo(() => {
      this.setState({checked: true})
    }))
  }

  render() {
    if (!this.state.checked) return null
    return (
      <AnimatedRouter
        transition={false}
      >
        {
          Routes.map(({name, path, exact = true, component}, key) => (
            <Route path={path} exact={exact} component={component} key={key} />
          ))
        }
      </AnimatedRouter>
    )
  }
}

export default App

// pure如果为 true，connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果，避免不必要的更新，
// 前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true
// 当使用react-redux connect时，浅对比会造成url更新，但路由不更新的问题，因此pure设置为false
// export default connect(null, null, null, {pure: false})(App)
